import React,{Component} from 'react';
import KanbanBorad from "./KanbanBorad";
import 'whatwg-fetch';
import 'babel-polyfill';//使用array.prototype.find .findIndex
import update from 'react-addons-update';//不可变性助手
const API_URL ='http://kanbanapi.pro-react.com';
const API_HEADES={
    'Content-Type':'application/json',
    Authorization:'any-string-you-like'
};

//模拟数据
let cardsList=[
    {
        id:1,
        title:"React the Book",
        description:"我想读**整本**书",//这里加**是MarkDown格式
        status:"in-progress",
        color:'#BD8D31',
        tasks:[]
    },
    {
        id:2,
        title:"这是第二个啦",
        description:"描述二[百度](https://www.baidu.com/)",//MarkDown格式测试
        status:"todo",
        color:'#3A7E28',
        tasks:[
            {
                id:1,
                name:"啥1",
                done:true
            },
            {
                id:2,
                name:"啥2",
                done:false
            },
            {
                id:3,
                name:"啥3",
                done:false
            }
        ]
    }
];

class KanbanBoradContainer extends Component{

    constructor(){
        super(...arguments);
        this.state={
            cards:[],
        };
    }

    render(){
        return(<KanbanBorad cards={this.state.cards}
                            taskCallbacks={{
                                toggle:this.toggleTask.bind(this),
                                delete:this.deleteTask.bind(this),
                                add:this.addTask.bind(this),
                            }}/>);
    }

    componentDidMount(){
       /* console.log('网络访问...');
        fetch(API_URL+'/cards',{headers:API_HEADES})
            .then((response)=>response.json())
            .then((responseData)=>{
                console.log('进入这里');
                console.log('这里是访问内容'+responseData.toString);
            this.setState({cards:responseData})
                console.log('这里是访问内容'+responseData.toString);
        })
            .catch((error)=>{
            console.log("网络访问出错啦",error);
            });

        console.log('网络访问结束...');*/
       this.setState({
           cards:cardsList,
       });
    }
    //task 作业
    addTask(cardId,taskName){
        console.log("增加"+taskName);
        let cardIndex = this.state.cards.findIndex((card)=>card.id==cardId);
        let nextTask = {id:Date.now(),name:taskName,done:false};
        //不可变性操作增加
        let nextState = update(this.state.cards,{
                                        [cardIndex]:{
                                            tasks:{$push:[nextTask]}
                                        }
                                    });
        this.setState({
            cards:nextState
        });
    }

    deleteTask(cardId,taskId,taskIndex){
        console.log("删除"+taskId);
        //获取索引 这里使用到了'babel-polyfill'
        let cardIndex = this.state.cards.findIndex((card)=>card.id==cardId);
        //不可变性助手使用
        let nextState = update(this.state.cards,{
                                   [cardIndex]:{
                                       tasks:{$splice:[[taskIndex,1]]}
                                   }
                                })

        console.log("数据"+nextState.cards);
        //更新state
        this.setState({
            cards:nextState,
        })
    }

    toggleTask(cardId,taskId,taskIndex) {
        console.log("toggle" + taskId);
        let cardIndex = this.state.cards.findIndex((card) => card.id == cardId);
        let nextState = update(this.state.cards, {
            [cardIndex]: {
                tasks: {
                    [taskIndex]: {
                        done: {
                            $apply: (done) => {
                               !done
                            }
                        }
                    }
                }
            }
        })

    }

}

export default KanbanBoradContainer;